import { useState,useEffect } from 'react'
import './App.css'
import ContestList from './components/ContestList';
import EmptyItem from './components/EmptyItem';
import { Contest, ContestTab} from './components/context/style'
import axios from 'axios'
import WeUI from 'react-weui'
import classnames from 'classnames'
// 数据请求
import { getContextData } from './api/request'
// import { ContestWrapper } from './components/context/style';
// import  from './components/ContestTab'
const {
  Toast
} = WeUI;

function App() {
  const tabClasses = ['item'];
  const [tab,setTab] = useState('all');
  const [loading,setLoading] = useState(false);
  const [data,setDate] = useState([]);

  const changeTab = (tab) => {
    setTab(tab)
  }

  useEffect(() => {
    
    (async () => {
      setLoading(true);
      // console.log(getContextData({tab}));
      let data = await getContextData({tab});
      setDate([
        ...data
      ])
      
    })()
    // axios
    //   .get('https://www.fastmock.site/mock/759aba4bef0b02794e330cccc1c88555/beers/match')
    //   .then(res => {
    //     if(res.data){
    //       // console.log(res.data);
    //       setDate([...res.data]);
    //       // setLoading(false);
    //     } else {
    //       console.log('出错了~');
    //     }
    //   }
    // )
  },[tab])

  useEffect(() => {
    if(data.length>=0){
      setLoading(false);
    }
  },[data])

  return (
    <Contest>
     <h1>热门赛事</h1>
     <ContestTab>
        <ul className="">
            {/* 多个类名动态改变 连接 classnames工具*/}
            <li className={classnames({active:tab == 'all'})} onClick={changeTab.bind(null, 'all')}>全部</li>
            <li className={tab=="dj"?'active':''} onClick={changeTab.bind(null, 'dj')}>电竞赛事</li>
            <li className={tab=="sports"?'active':''} onClick={changeTab.bind(null, 'sports')} >体育赛事</li>
        </ul>
        <span className="">城市</span>
      </ContestTab>  
      {/* 加载弹层 */}
      <Toast show={loading} icon="loading">加载中...</Toast>
      {data.length>0&&<ContestList data={data}/>}
      {data.length==0&&<EmptyItem/>}
      
    </Contest>
  )
}

export default App
